<template>
  <div class="skill">
    <hmNavBar title="面试技巧" path="/home/find"> </hmNavBar>
    <div class="content">
      <van-search
        v-model="skillValue"
        show-action
        placeholder="请输入关键字"
        @search="search"
        @cancel="cancel"
      >
      </van-search>
      <van-list
        v-model="loading"
        @load="load"
        :finished="finished"
        finished-text="已加载完成"
      >
        <techincItem
          v-for="(item, index) in technicList"
          :key="index"
          :info="item"
        >
        </techincItem>
        <!-- 暂无数据处理 -->
        <div class="noData" v-if="finished && technicList.length === 0">
          暂无数据
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
import techincItem from './techincItem.vue'
import { articlesTechnic } from '@/api/find.js'
export default {
  components: {
    techincItem
  },
  data () {
    return {
      technicList: [],
      skillValue: '',
      loading: false, //true正在加载，上拉时，它会自动变true false此次加载完成
      finished: false, //表示是否加载完成  false还没完成  true:所有数据已加载完成
      currentPage: 0, //页码 [0,1,2,3,4,5,6,7,8,9,10] 第一起始页为2  第二起始页为 5  第三起始页为10
      pageSize: 5 //页容量
    }
  },
  async created () {},
  methods: {
    /* 上拉加载 */
    async load () {
      this.currentPage++
      /* 传三个参数调接口start 是起始索引,就是每页的开始第一条,limit是个数(页容量)  q是传搜索框里输入的内容*/
      let _q = {
        start: (this.currentPage - 1) * this.pageSize,
        limit: this.pageSize,
        q: this.skillValue
      }
      const res = await articlesTechnic(_q)
      /* 数据应该 是累加 */
      this.technicList.push(...res.data.data.list)
      this.loading = false
      window.console.log('面经技巧2', res)
      /* 如果数据加载完成 finished=true */
      if (this.technicList.length >= res.data.data.total) {
        this.finished = true
      }
    },
    /* 搜索事件 */
    search (value) {
      window.console.log(value)
      /* 1.先还原van-list用到的所有数据 */
      this.currentPage = 0
      this.finished = false
      this.technicList = []
      /* 2.让load方法执行 */
      this.loading = true
      this.$nextTick(() => {
        this.loading = false
      })
    },
    /* 取消事件 */
    cancel (value) {
      window.console.log(value)
    }
  }
}
</script>

<style lang="less" scoped>
.skill {
  .content {
    padding: 20px @p15;
    .skill_input {
      border-radius: 8px;
    }
  }
}
</style>
